<!DOCTYPE html>
<html lang="en" xmlns:svg="http://www.w3.org/2000/svg">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .container {
            width: 1000px;
            margin: 50px auto;
        }

        .menulist {
            display: flex;
            margin: 10px;
        }

        .menulist li {
            font-size: 14px;
            padding: 10px 20px;
            margin: 0px 10px;
        }

        .menulist li.item {
            cursor: pointer;
        }

        .menulist li.item:hover,
        .menulist li.item.active {
            color: #fff;
            border-radius: 5px;
            background: #ed0b75;
        }

        .showList {
            padding: 10px;
        }

        .showList li {
            padding: 10px;
            border-bottom: 1px dashed #ccc;
            height: 200px;
            display: flex;
        }

        .showList li img {
            min-width: 150px;
            height: 200px;
        }

        .showList li .content {
            width: 100%;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            font-size: 14px;
            color: #999;
        }

        .showList li .content>div {
            width: 100%;
        }

        .showList li .content .title {
            font-size: 16px;
            color: #000;
        }

        .showList li .content .top div {
            padding: 5px 0;
        }

        .showList li .content .price {
            color: #ed0b75;
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="menulist cityList">
            <li>城市：</li>
        </ul>
        <ul class="menulist typeList">
            <li>类型：</li>
        </ul>
        <ul class="showList">

        </ul>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="data.js"></script>
    <script>
        //DOMContentLoaded   dom加载完成事件

        //$(document).ready和window.onload区别
        //  DOMContentLoaded  dom结构生成完
        // onload是所有资源都加载完成 图片 音频
        $(function () {
            var createMenus = (arr, container) => {
                arr.forEach(item => {
                    $(container).append(`<li class="item">${item.name}</li>`)
                })
                $(container + " li.item").first().addClass("active")
                $(container + "  li.item").click(function () {
                    $(this).addClass("active").siblings(".active").removeClass("active")
                })
            }
            createMenus(cityList, ".cityList")
            createMenus(typeList, ".typeList")

            var formatState = (state) => {
                var arr = ["售票中", "售罄", "待开票"]
                return arr[state]
            }

            showList.forEach(item => {
                $(".showList").append(`
                <li>
                <img src="${item.img}">
                <div class="content">
                    <div class="top">
                        <div class="title">【${item.city}】 ${item.name}</div>
                        <div>艺人：${item.artist}</div>
                        <div>${item.city} | ${item.address}</div>
                        <div>${item.time}</div>
                    </div>
                    <div><span class="price">${item.price[0]}-${item.price[item.price.length-1]}</span> 
                        ${formatState(item.state)}
                        </div>
                </div>
            </li>
                `)
            })

        })
    </script>
</body>

</html>